<!--
 * @Description: 首页左侧
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-20 10:01:02
-->
<template>
  <div class="home_right">
    <div class="top shadow">
      <div v-if="theme === 1" class="top_nav">
        <div v-for="(item, index) in topnavList" :key="index" class="top_nav_item FZYcursor" @click="chooseTopnav(index)">
          <div :class="topnavIndex == index ? 'top_nav_active' : 'top_nav_none'">{{ item.text }}</div>
          <div class="top_nav_num_bg">
            <div class="top_nav_num">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <div v-if="theme === 1" class="top_infoA">
        <el-table :data="topitemList" stripe style="width: 100%" :header-cell-style="{ background: '#ffffff', fontSize:'16px',border: '0' }" :cell-style="{ border: '0', height: '43px' }" @row-click="hanldeClick">
          <el-table-column align="left" label="主题" width="auto">
            <template slot-scope="scope">
              <div class="title">
                <div class="title-i">
                  <div class="circle"></div>
                  <IconA :index="1" :font="'12px'"></IconA>
                </div>
                <div class="ellipsis">{{ scope.row.taskName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="所属系统" width="100">
            <template slot-scope="scope">
              <div class="ellipsis text">{{ scope.row.subordinateSystem }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" width="100" label="任务分类">
            <template slot-scope="scope">
              <div class="text" style="color:#7D7E80;">{{ scope.row.taskTypeName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="提交人" width="90">
            <template slot-scope="scope">
              <div class="text" style="color:#7D7E80;">{{ scope.row.createUserName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="提交时间" width="160">
            <template slot-scope="scope">
              <div class="text" style="color:#7D7E80;">{{ scope.row.updateTime }}</div>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="@/assets/nodata.png" />
          </div>
        </el-table>
      </div>
      <div v-if="theme == 1" class="top_pageA">
        <section>
          <el-pagination :page-size="tasksForm.pageSize" :current-page.sync="tasksForm.page" layout="prev, pager, next, jumper" :total="toptotal" @current-change="gettasks()"></el-pagination>
          <div class="top_page_totle">总共{{toptotal}}条</div>
        </section>
        <div>
          <el-button size="mini" class="bottom_all_two" round @click="toTask">进入任务中心</el-button>
          <el-button icon="el-icon-refresh-right" size="mini" class="bottom_all_two" round @click="gettasks()">刷 新</el-button>
        </div>
      </div>
      <div v-if="theme === 2" class="top_navB">
        <div v-for="(item, index) in topnavList" :key="index" class="FZYcursor" :class="topnavIndex == index ? 'top_nav_item_avtive' : 'top_nav_item'" @click="chooseTopnav(index)">
          <div>{{ item.text }}</div>
          <div class="top_nav_num_bg">
            <div class="tnnBo"></div>
            <div class="tnnBb"></div>
            <div class="top_nav_num">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <div v-if="theme === 2" class="top_infoB">
        <el-table :data="topitemList" stripe style="width: 100%" height="329" :header-cell-style="{ background: '#fff ',fontSize:'14px' }" @row-click="hanldeClick">
          <el-table-column align="left" label="主题" width="auto">
            <template slot-scope="scope">
              <div class="title">
                <IconA :index="2" :font="'12px'"></IconA>
                <div class="ellipsis">{{ scope.row.taskName }}</div>
                <el-tag type="danger" effect="plain" size="mini">待办</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="所属系统" width="100">
            <template slot-scope="scope">
              <div class="ellipsis text">{{ scope.row.subordinateSystem }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" width="100" label="任务分类">
            <template slot-scope="scope">
              <div class="text" style="color:#7D7E80;">{{ scope.row.taskTypeName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="提交人" width="120">
            <template slot-scope="scope">
              <div class="text" style="color:#969799;">{{ scope.row.createUserName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="提交时间" width="160">
            <template slot-scope="scope">
              <div class="text" style="color:#969799;">{{ scope.row.updateTime }}</div>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="@/assets/nodata.png" />
          </div>
        </el-table>
      </div>
      <div v-if="theme == 2" class="top_pageB">
        <section>
          <div class="top_page_totle">总共{{toptotal}}条</div>
          <el-pagination :page-size="tasksForm.pageSize" :current-page.sync="tasksForm.page" layout="prev, pager, next, jumper" :total="toptotal" @current-change="gettasks()"></el-pagination>
        </section>
        <div>
          <el-button size="mini" class="bottom_all_two" @click="toTask">进入任务中心</el-button>
          <el-button icon="el-icon-refresh-right" size="mini" class="bottom_all_two" @click="gettasks()">刷 新</el-button>
        </div>
      </div>
      <div v-if="theme === 3" class="top_navC">
        <div v-for="(item, index) in topnavList" :key="index" class="FZYcursor" :class="topnavIndex == index ? 'top_nav_item top_nav_active' : 'top_nav_item top_nav_none'" @click="chooseTopnav(index)">
          <div>{{ item.text }}</div>
          <div class="top_nav_num_bg">{{ item.num }}</div>
        </div>
      </div>
      <div v-if="theme === 3" class="top_infoC">
        <el-table :data="topitemList" stripe style="width: 100%" :header-cell-style="{ background: '#F7F9FC',fontSize:'16px',color:'#404040' }" :cell-style="{ border: '0', height: '43px' }" @row-click="hanldeClick">
          <el-table-column align="left" label="主题" width="auto">
            <template slot-scope="scope">
              <div class="title">
                <div class="title-i">
                  <div class="circle"></div>
                  <IconA :index="3" :font="'24px'"></IconA>
                </div>
                <div class="ellipsis">{{ scope.row.taskName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="所属系统" width="100">
            <template slot-scope="scope">
              <div class="ellipsis text">{{ scope.row.subordinateSystem }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" width="100" label="任务分类">
            <template slot-scope="scope">
              <div class="text" style="color:#7D7E80;">{{ scope.row.taskTypeName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交人" width="90">
            <template slot-scope="scope">
              <div class="text" style="color:#666666;">{{ scope.row.createUserName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交时间" width="160">
            <template slot-scope="scope">
              <div class="text" style="color:#666666;">{{ scope.row.updateTime }}</div>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="@/assets/nodata.png" />
          </div>
        </el-table>
      </div>
      <div v-if="theme == 3" class="top_pageC">
        <section>
          <div class="top_page_totle">总共{{toptotal}}条</div>
          <el-pagination :page-size="tasksForm.pageSize" :current-page.sync="tasksForm.page" layout="prev, pager, next, jumper" :total="toptotal" @current-change="gettasks()"></el-pagination>
        </section>
        <div>
          <el-button size="mini" class="bottom_all_two" @click="toTask">进入任务中心</el-button>
          <el-button icon="el-icon-refresh-right" size="mini" class="bottom_all_two" @click="gettasks()">刷 新</el-button>
        </div>
      </div>
    </div>
    <div class="bot shadow">
      <div v-if="theme == 1" class="bot_nav">
        <div>
          <div v-for="(item, index) in botnavList" :key="index" class="bot_nav_item FZYcursor" @click="chooseBotnav(index)">
            <div :class="botnavIndex == index ? 'bot_nav_active' : 'bot_nav_none'">{{ item.itemName }}</div>
          </div>
        </div>
      </div>
      <div v-if="theme === 1" class="top_infoA">
        <el-table :data="botitemList" stripe style="width: 100%" :header-cell-style="{ background: '#F7F9FC', fontSize:'16px',border: '0' }" :cell-style="{ border: '0', height: '43px' }" @row-click="tonews">
          <el-table-column align="left" label="主题" width="auto">
            <template slot-scope="scope">
              <div class="title">
                <div class="title-i">
                  <div class="circle"></div>
                  <IconA :index="1" :font="'12px'"></IconA>
                </div>
                <div class="ellipsis">{{ scope.row.title }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="提交人" width="90">
            <template slot-scope="scope">
              <div class="text" style="color:#7D7E80;">{{ scope.row.publishUserName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="提交时间" width="160">
            <template slot-scope="scope">
              <div class="text" style="color:#7D7E80;">{{ scope.row.publishTime }}</div>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="@/assets/nodata.png" />
          </div>
        </el-table>
      </div>
      <div v-if="theme == 1" class="top_pageA">
        <section>
          <el-pagination :page-size="newsForm.pageSize" :current-page.sync="newsForm.page" layout="prev, pager, next, jumper" :total="bottotal" @current-change="getnews()"></el-pagination>
          <div class="top_page_totle">总共{{bottotal}}条</div>
        </section>
        <div>
          <el-button icon="el-icon-refresh-right" size="mini" round class="bottom_all_two" @click="getnews()">刷 新</el-button>
        </div>
      </div>
      <div v-else-if="theme == 2" class="bot_navB">
        <div>
          <div v-for="(item, index) in botnavList" :key="index" class="FZYcursor" :class="botnavIndex == index ? 'bot_nav_item_active' : 'bot_nav_item'" @click="chooseBotnav(index)">
            <div>{{ item.itemName }}</div>
          </div>
        </div>
      </div>
      <div v-if="theme === 2" class="top_infoB">
        <el-table :data="botitemList" stripe style="width: 100%" height="329" :header-cell-style="{ background: ' #fff ',fontSize:'14px' }" @row-click="tonews">
          <el-table-column align="left" label="主题" width="auto">
            <template slot-scope="scope">
              <div class="title">
                <IconA :index="2" :font="'12px'"></IconA>
                <div class="ellipsis">{{ scope.row.title }}</div>
                <el-tag v-if="scope.row.readStatus==1" type="success" effect="plain" size="mini">已读</el-tag>
                <el-tag v-else type="danger" effect="plain" size="mini">未读</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交人" width="120">
            <template slot-scope="scope">
              <div class="text" style="color:#969799;">{{ scope.row.publishUserName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交时间" width="160">
            <template slot-scope="scope">
              <div class="text" style="color:#969799;">{{ scope.row.publishTime }}</div>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="@/assets/nodata.png" />
          </div>
        </el-table>
      </div>
      <div v-if="theme == 2" class="top_pageB">
        <section>
          <div class="top_page_totle">总共{{bottotal}}条</div>
          <el-pagination :page-size="newsForm.pageSize" :current-page.sync="newsForm.page" layout="prev, pager, next, jumper" :total="bottotal" @current-change="getnews()"></el-pagination>
        </section>
        <div>
          <el-button icon="el-icon-refresh-right" size="mini" class="bottom_all_two" @click="getnews()">刷 新</el-button>
        </div>
      </div>
      <div v-else-if="theme == 3" class="bot_navC">
        <div>
          <div v-for="(item, index) in botnavList" :key="index" class="bot_nav_item FZYcursor" @click="chooseBotnav(index)">
            <div :class="botnavIndex == index ? 'bot_nav_active' : 'bot_nav_none'">{{ item.itemName }}</div>
          </div>
        </div>
      </div>
      <div v-if="theme === 3" class="top_infoC">
        <el-table :data="botitemList" stripe style="width: 100%" :header-cell-style="{ background: '#F7F9FC',fontSize:'16px',color:'#404040' }" :cell-style="{ border: '0', height: '43px' }" @row-click="tonews">
          <el-table-column align="left" label="主题" width="auto">
            <template slot-scope="scope">
              <div class="title">
                <div class="title-i">
                  <div class="circle"></div>
                  <IconA :index="3" :font="'24px'"></IconA>
                </div>
                <div class="ellipsis">{{ scope.row.title }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交人" width="90">
            <template slot-scope="scope">
              <div class="text" style="color:#666666;">{{ scope.row.publishUserName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交时间" width="160">
            <template slot-scope="scope">
              <div class="text" style="color:#666666;">{{ scope.row.publishTime }}</div>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="@/assets/nodata.png" />
          </div>
        </el-table>
      </div>
      <div v-if="theme == 3" class="top_pageC">
        <section>
          <div class="top_page_totle">总共{{bottotal}}条</div>
          <el-pagination :page-size="newsForm.pageSize" :current-page.sync="newsForm.page" layout="prev, pager, next, jumper" :total="bottotal" @current-change="getnews()"></el-pagination>
        </section>
        <div>
          <el-button icon="el-icon-refresh-right" size="mini" class="bottom_all_two" @click="getnews()">刷 新</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import IconA from "../icon/left_iconA";
import { mapGetters } from "vuex";
import { indexquery_page, tailAfterTaskQueryPage, backlogQueryPage } from "@/api/index.js";
import { getUserId } from '@/utils/auth.js';
import { getDicType } from '@/api/common';
export default {
  components: {
    IconA
  },
  data() {
    return {
      topnavList: [
        { text: "计时待办任务", num: 0 },
        { text: "非计时待办任务", num: 0 },
        { text: "跟踪事项", num: 0 },
        { text: "会议", num: 0 }
      ],
      topnavIndex: 0,
      botnavList: [],
      botnavIndex: 0,
      topitemList: [],
      toptotal: 0,
      tasksForm: {
        page: 1,
      },
      botitemList: [],
      bottotal: 0,
      newsForm: {
        page: 1,
        pageSize: 7,
      },
    };
  },
  computed: {
    ...mapGetters({
      theme: "gettheme"
    }),
    iconCstyle() {
      return "border: 1px solid rgba(235, 238, 245, 1);border-radius: 4px;";
    }
  },
  methods: {
    initData() {
      const params = {
        page: 1,
        pageSize: 7,
        timekeeping: 0,
      }
      backlogQueryPage(params).then(res => {
        if (res.code === 1001) {
          this.topnavList[1].num = res.data.totalRows;
        }
      })
      tailAfterTaskQueryPage(params).then(res => {
        if (res.code === 1001) {
          this.topnavList[2].num = res.data.totalRows;
        }
      })
      /**
       * @Description: 初始化新闻公告
       * @param {*}
       * @Author: wangwangwang
       */
      getDicType({ code: 'infoType' }).then(res => {
        this.botnavList = res.data.items;
        this.getnews();
      });
    },
    hanldeClick(data) {
      if (data.formType === 1) { // 自定义表单
        const query = {
          processManagerId: data.processManagerId,
          processTaskId: data.id,
          processVersionId: data.versionNumber,
          receiptNumber: data.receiptNumber,
          taskName: data.taskName,
          taskStatus: data.taskStatus,
          createTime: data.createTime,
          createUserName: data.createUserName,
          type: 2,
          taskType: this.topnavIndex===2?7:1,
          isReadOnly: this.topnavIndex===2 ? 1 : 0,
        }
        this.$router.push({ name: 'taskDetails', query });
        return
      }
      const query = {
        processManagerId: data.processManagerId,
        processTaskId: data.id,
        processVersionId: data.versionNumber,
        receiptNumber: data.receiptNumber,
        dataContent: data.dataContent,
        createTime: data.createTime,
        createUserName: data.createUserName,
        taskName: data.taskName,
        taskStatus: data.taskStatus,
        type: 2, // 1为发起 2为详情审批
        taskType: this.topnavIndex===2?7:1,
        isReadOnly: this.topnavIndex===2 ? 1 : 0,
      }
      this.$router.push({ name: data.dataSource, query });
    },
    getnews() {
      this.newsForm.userId = getUserId()
      this.newsForm.infoTypeId = this.botnavList[this.botnavIndex].id;
      indexquery_page(this.newsForm).then(res => {
        this.botitemList = res.data.data
        this.bottotal = res.data.totalRows
      })
    },
    tonews(a) {
      this.$router.push({ name: 'details', query: { id: a.noticeId, type: 'notice' } })
    },
    gettasks() {
      if (this.topnavIndex === 0) {
        const params = {
          page: this.tasksForm.page,
          pageSize: 7,
          timekeeping: 1,
        }
        backlogQueryPage(params).then(res => {
          if (res.code === 1001) {
            this.topitemList = res.data.data
            this.toptotal = res.data.totalRows
          }
        })
      } else if (this.topnavIndex === 1) {
        const params = {
          page: this.tasksForm.page,
          pageSize: 7,
          timekeeping: 0,
        }
        backlogQueryPage(params).then(res => {
          if (res.code === 1001) {
            this.topitemList = res.data.data
            this.toptotal = res.data.totalRows
          }
        })
      } else if (this.topnavIndex === 2) {
        const params = {
          page: this.tasksForm.page,
          pageSize: 7,
          timekeeping: 0,
        }
        tailAfterTaskQueryPage(params).then(res => {
          if (res.code === 1001) {
            this.topitemList = res.data.data
            this.toptotal = res.data.totalRows
          }
        })
      } else {
        this.toptotal = 0;
        this.page = 1;
        this.topitemList = [];
      }
    },
    toTask() {
      if (this.topnavIndex == 2) {
        this.$router.push({ name: 'Trackitems' })
        return
      }
      this.$router.push({ name: 'taskagents' })
    },
    chooseTopnav(index) {
      this.topnavIndex = index;
      this.tasksForm = this.$options.data().tasksForm
      this.gettasks()
    },
    /**
     * @Description: 新闻公告
     * @param {*} index
     * @Author: wangwangwang
     */
    chooseBotnav(index) {
      this.botnavIndex = index;
      this.newsForm = this.$options.data().newsForm
      this.getnews()
    }
  },
  mounted() {
    /**
     * @Description: 初始化数据
     * @param {*}
     * @Author: wangwangwang
     */
    this.gettasks()
    this.initData();
  }
};
</script>
<style lang="scss">
.top_infoA {
  .el-table thead {
    color: #666666;
    font-weight: bold;
  }
}
.top_infoB {
  .el-table thead {
    color: #969799;
    font-weight: bold;
  }
}
.top_infoC {
  .el-table thead {
    font-weight: bold;
  }
}
</style>
<style lang="scss" scoped>
@import "home_left.scss";
.FZYcursor {
  cursor: pointer;
}
</style>
